<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<!-- :change:prop= 写法表示将一个事件绑定到一个属性上。当该属性发生变化时，会触发相应的事件处理函数。这种写法通常用于表单元素，如输入框、选择框等。 -->
		<!-- :prop="option" :change:prop="echarts.updateEcharts"一定要写，兼容app端的关键 -->
		<view :style="ChartStyle" id="echarts" class="echarts" :prop="option" :change:prop="echarts.updateEcharts"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	name: 'ComCharts',
	data() {
		return {
			option: {
				title: {
					text: '示例'
				},
				tooltip: {},
				legend: {
					data: ['销量']
				},
				xAxis: {
					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋']
				},
				yAxis: {},
				series: [
					{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 20]
					}
				]
			},
			ChartOption: {}
		};
	},
	onLoad() {},
	props: {
		ChartStyle: {
			type: String, //类型
			required: false, //是否必填
			default: 'width:100%;height:100%' //默认值
		}
	},
	methods: {
		changeOption(a) {
			this.option = a;
			this.echarts?.updateEcharts();
		}
	}
};
</script>
<script module="echarts" lang="renderjs">
let myChart
export default {
	mounted() {
		// 检查window.echarts是否为函数来判断是否已经在全局范围内引入了ECharts库。
		//如果已经在全局范围内引入了ECharts库，window.echarts会被定义为一个函数
		if (typeof window.echarts === 'function') {
			this.initEcharts()
		} else {
			//如果window.echarts不是函数，说明ECharts库尚未在全局范围内可用，需要进行动态引入。
			//通过创建一个<script>标签元素，指定ECharts库的路径（在这个例子中是static/echarts.js），
			//并将其添加到文档头部。
			const script = document.createElement('script') 
			script.src = 'static/echarts.js'
			//当动态加载的ECharts库脚本加载完成后，会触发onload事件，此时调用this.initEcharts()进行图表的初始化。
			//绑定initEcharts方法的执行上下文（即this的值）的操作,确定this指向
			script.onload = this.initEcharts.bind(this)
			document.head.appendChild(script)
		}
	},
	methods: {
		initEcharts() {
					echarts.init(document.getElementById('echarts')).setOption(this.option)

		},
		updateEcharts(newValue, oldValue, ownerInstance, instance) {
			// 监听 service 层数据变更
			echarts.init(document.getElementById('echarts')).setOption(newValue)
		}
	}
}
</script>
